<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.Object.defineproperty</title>
</head>
<body>
    
</body>
</html>

<script>
    let obj1 = {
        name: ''
    }

    function defineReactive(obj, prop, val) {
        Object.defineProperty(obj, prop, {
            // enumerable: true,
            // configurable: true,
            get() {
                // 后续都是在访问器属性get中收集依赖
                return val
            },
            set(value) {
                // 后续都是在访问器属性set中触发依赖
                if(val === value) return
                val = value
            }
        })
    }

    defineReactive(obj1, 'name', '周钰')
    defineReactive(obj1, 'job', '前端工程师')
    // obj1.job = '已跳槽的前端工程师'
    delete obj1.job

    console.log('obj1:', obj1)
</script>